<template>

  <div class="home-box  w-4/5 flex justify-between items-center mx-auto">
    <div class="text-[#fff] flex flex-col justify-center items-start ">
      <div>
        <typewritter ref="type" @change="change"></typewritter>
      </div>
      <div class="text-xl mt-6">
        <p>我是一名热爱技术的前端开发者</p>
        <p>这里记录我的学习历程、项目经验和技术思考，当然还有我的生活</p>
      </div>
      <div class="imgs flex gap-4 justify-center items-center mt-8 relative">
        <img @click="goLink(index)" @mouseenter="showWechat(true,index)" @mouseleave="showWechat(false,index)" v-for="(img, index) in imgs" class="w-10 h-10 hover:cursor-pointer" :src="img"
          :key="index" alt="">
        <transition name="fade">
          <div v-if="isShowWechat"
            class="wechat-box absolute top-14 left-0 w-54 h-54 bg-white rounded-md overflow-hidden flex justify-center items-center">
            <img src="/qr.jpg" alt="">
          </div>
        </transition>

      </div>
    </div>
    <div class="w-[500px] h-[500px] rounded-full overflow-hidden shadow-lg border-2 border-[#9d79ea]">
      <img class="w-full h-full object-center object-cover" src="/public/hanabi.jpg" alt="">
    </div>
  </div>

</template>

<script setup lang='ts'>
useHead({
  title: 'home'
})
const isShowWechat = ref(false)
const imgs = ref([
  '/github.svg',
  '/wechat.svg',
  '/email.svg',
  '/gitee.svg'
])

const goLink = (index: number) => {
  if (index === 0) {
    window.open('https://github.com/chosetop')
  } else if (index === 2) {
    window.open('mailto:257600344@qq.com')
  } else if (index === 3) {
    window.open('https://gitee.com/rivenplayer')
  }
}
const showWechat = (status: boolean, index: number) => {
  if (index === 1) {
    isShowWechat.value = status
  }
}
const type = ref()

const change = (status: boolean) => {
  console.log('home:', status)
  type.value.change(status)
};

defineExpose({ change });
</script>
<style scoped>
.home-box {
  height: calc(100vh - 200px);
}
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}
</style>